@import "../../styles/variables";
@import "../../styles/mixins";

.alert {
  display: flex;
  padding: 12px;
  border-radius: 4px;

  &-icon {
    flex-shrink: 0;
  }

  &-info {
    background-color: $alert-info-background;

    .alert-content {
      color: $alert-info-text-color;
    }
  }

  &-error {
    background-color: $alert-error-background;

    .alert-content {
      color: $alert-error-text-color;
    }
  }

  &-warning {
    background-color: $alert-warning-background;

    .alert-content {
      color: $alert-warning-text-color;
    }
  }

  &-default {
    background-color: $alert-default-background;

    .alert-content {
      color: $alert-default-text-color;
    }
  }
}

.alert-content {
  @include TypographyParagraph;
}

.alert-title {
  font-weight: 600;
}

.alert-icon {
  margin-right: 12px;
}
